<template>
   <div class="nav-app">
       <div class="logo">
           <img :src="imgsrc" alt="">
       </div>
       <div class="title">
           <p>省钱利器 购物超划算</p>
           <p>吃喝玩乐尽在美团</p>
       </div>
       <!-- 类似的跳转：router-link的to属性的path绝对跳转路径 -->
       <div class="toApp">
           去APP
       </div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               imgsrc:'https://p1.meituan.net/travelcube/7264ce9c25de2e464e3acd996fe8ad362803.png'
           }
       }
   }
</script>
   
<style scoped lang="less">
   .nav-app{
       height: 1.2rem;
       background: #000;
       color: white;
       display: flex;
       align-items: center;
       .logo{
           margin-left: .4rem;
           img{
               width: .96rem;
               height: .96rem;
           }
       }
       .title{
           margin-left: .266667rem;
           flex: 1;
           p{
               line-height: 1.5;
           }
       }
       .toApp{
           width: 1.466667rem;
           height: .8rem;
           background-image: linear-gradient(135deg, #FFD000 0%,#FFBD00 100%);
           border-radius: .133333rem;
           text-align: center;
           line-height: .8rem;
           color: #000;
           margin-right: .4rem;
       }
   }
</style>